import React, { useRef, useEffect } from "react";
import { Form, Input, Button, Select } from "antd";
import MyUpload from '../../../components/my-upload';
import "./index.less";

const { Option } = Select;
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 }
};

function AddFrom(props) {
  const formRef = useRef({
    name: '',
    typename: '',
    price: '',
    typeid: '',
    desc: '',
    img: '',
  });

  const onFinish = values => {
    props.onOk(values);
    formRef.current.resetFields();
  };

  const onCancel = () => {
    props.onCancel();
    formRef.current.resetFields();
  };

  useEffect(() => {
    formRef.current.setFieldsValue({
      name: props.goodsInfo.name,
      typename: props.goodsInfo.typename,
      price: props.goodsInfo.price,
      typeid: props.goodsInfo.typeid,
      desc: props.goodsInfo.desc,
      img: props.goodsInfo.img,
    });
  })

  const getImgUrl = (imgUrl) => {
    formRef.current.setFieldsValue({
      img: imgUrl
    });
  }

  const onTypeChange = value => {
    const _this = props.categories.find(cItem => cItem.typeid === value)
    formRef.current.setFieldsValue({
      typename: _this.name
    });
  }

  return (
    <Form
      {...layout}
      ref={formRef}
      name='control-hooks'
      onFinish={onFinish}
      initialValues={{
        name: '',
        parentType: '0'
      }}
    >
      <Form.Item
        name='name'
        label='商品名称'
        rules={[
          { required: true, whitespace: true, message: "请输入商品名称!" },
          { min: 2, message: "名称至少2位" },
          { max: 12, message: "名称最多12位" }
        ]}
      >
        <Input placeholder='请请入商品名称' />
      </Form.Item>
      <Form.Item
        name='typename'
        label='分类名称'
        style={{ display: 'none' }}
      >
        <Input placeholder='请输入描述' />
      </Form.Item>
      <Form.Item
        name='price'
        label='价格'
        rules={[
          { required: true, whitespace: true, message: "请输入价格!" }
        ]}
      >
        <Input placeholder='请输入价格' />
      </Form.Item>
      <Form.Item
        name='typeid'
        label='分类'
        rules={[
          { required: true, message: "请选择分类" }
        ]}
      >
        <Select
          placeholder="请选择分类"
          onChange={onTypeChange}
          allowClear
        >
          {
            props.categories.map(item => {
              return <Option key={item.typeid} value={item.typeid}>{item.name}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item
        name='desc'
        label='描述'
        rules={[
          { required: true, whitespace: true, message: "请输入描述" }
        ]}
      >
        <Input placeholder='请输入描述' />
      </Form.Item>
      <Form.Item
        name='img'
        label='图片'
        rules={[
          { required: true, message: "请上传图片" }
        ]}
      >
        <MyUpload getImgUrl={getImgUrl}/>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type='primary' htmlType='submit'>
          确定
        </Button>
        <Button
          htmlType='button'
          onClick={onCancel}
          className='cancelBtn'
        >
          取消
        </Button>
      </Form.Item>
    </Form>
  );
}

export default AddFrom;
